<template>
	<div class="h-screen">
    <div class="h-screen flex-col">
      <div class="shadow-sm h-12 flex px-5 " >
        <div
          style="clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);  background: #000;"
          class="md-hidden m-2 rounded-lg bg-gray-200 min-w-200 shadow-inner flex items-center justify-center w-2/0">
          <!-- <span id="edn-1">SRC</span><span id="edn-2">Star River Cup</span> -->
          <span class="font-bold text-white">Star River</span>
          <span style=" background-color: #f7971e;margin-left: 0.5em;padding: 0 0.2em;" class="rounded font-bold text-black">Cup</span>
        </div>
        <ul class="flex sm:ml-10 sm-hidden">
          <slot></slot>
        </ul>
        <div class="sm-show">
          <div class="h-full w-full flex items-center">
            手机显示这个
          </div>
        </div>
        <div class="flex ml-auto">
          <li class="menuItem flex-shrink-0 menuItem-active avataritem ">
            <span class="flex items-center h-12">
              <el-avatar icon="el-icon-user-solid"
                class="self-center shadow"
                :size="32"
                :src="avatorurl"
              ></el-avatar>
            </span>
            <div v-if="token">
              <span class="font-bold text-lg">
                {{info.name}}
              </span>
              <el-divider class="my-3" />
              <div class="title flex justify-evenly">
                <span>
                  <img :src="require('@/assets/start.png')">
                  <el-badge :value="100" :max="10">
                    关注
                  </el-badge>
                </span>
                <span>
                  <img :src="require('@/assets/info.png')">
                  <el-badge :value="100" :max="10">
                    消息
                  </el-badge>
                </span>
                <span>
                  <img :src="require('@/assets/cehngjiu.png')">
                  <el-badge :value="100" :max="10">
                    成就
                  </el-badge>
                </span>
              </div>
              <el-divider class="my-3" />
              <span class="item"
                @click="()=>{}"
              >
                <img :src="require('@/assets/game.png')">我的比赛
                <i class="el-icon-arrow-right ml-auto" />
              </span>
              <span class="item"
                @click="$router.push({name:'info'})"
                ><img :src="require('@/assets/wode2.png')">个人信息
                <i class="el-icon-arrow-right ml-auto" />
              </span>
              <span class="item"
                @click="$router.push({name:'info'})"
                ><img :src="require('@/assets/group.png')">组织信息
                <i class="el-icon-arrow-right ml-auto" />
              </span>
              <el-divider class="my-3" />
              <template v-if="info.type==1">
                <span class="item"
                  v-if="type"
                  @click="$router.push({name:'hostpage'})"
                >
                  <img :src="require('@/assets/zhuanhuan.png')">切换管理端
                  <i class="el-icon-arrow-right ml-auto" />
                </span>
                <span class="item"
                  v-else="type"
                  @click="$router.push({name:'main'})"
                >
                  <img :src="require('@/assets/zhuanhuan.png')">切换用户端
                  <i class="el-icon-arrow-right ml-auto" />
                </span>
              </template>
              <span class="item"
                @click="()=>{}"
                ><img :src="require('@/assets/lianxiren.png')">联系管理员
                <i class="el-icon-arrow-right ml-auto" />
              </span>
              <span class="item"
                @click="$store.dispatch('logOut');$router.push({name:'relog'})"
                ><img :src="require('@/assets/goout.png')">退出登录
                <i class="el-icon-arrow-right ml-auto" />
              </span>
            </div>
            <div v-else>
              <span class="item"
                @click="$router.push({name:'relog'})"
                >
                <svg t="1652489639518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2038" width="24" height="24"><path d="M496.3 738.3h62.2v121.8h-62.2z" fill="#F8B62D" p-id="2039"></path><path d="M558.5 870.4h-62.2c-5.7 0-10.4-4.7-10.4-10.4V738.3c0-5.7 4.7-10.4 10.4-10.4h62.2c5.7 0 10.4 4.7 10.4 10.4V860c0 5.8-4.6 10.4-10.4 10.4z m-51.8-20.8h41.4v-101h-41.4v101z" fill="#3E3A39" p-id="2040"></path><path d="M717.7 874.8H371.1c-10.3 0-18.7 8.4-18.7 18.7 0 10.3 8.4 18.7 18.7 18.7h346.6c10.3 0 18.7-8.4 18.7-18.7 0-10.3-8.4-18.7-18.7-18.7zM807.2 324.8c-0.3 0-0.6-0.1-0.9-0.1H280.2c-15.3 0-27.7 12.4-27.7 27.7v357.4c0 1.8 0.2 3.5 0.5 5.2 2.4 12.8 13.7 22.6 27.2 22.6h128.9c372.5-71.7 404-306.3 398.1-412.8z" fill="#FCEE21" p-id="2041"></path><path d="M806.3 737.7c15.3 0 27.7-12.4 27.7-27.7V352.5c0-15-11.9-27.2-26.8-27.6C813 431.4 781.6 666 409.1 737.7h397.2z" fill="#F8B62D" p-id="2042"></path><path d="M710.3 922.7H344.5c-20.1 0-36.5-16.4-36.5-36.5s16.4-36.5 36.5-36.5h365.8c20.1 0 36.5 16.4 36.5 36.5s-16.4 36.5-36.5 36.5z m-365.8-52.3c-8.7 0-15.7 7-15.7 15.7s7 15.7 15.7 15.7h365.8c8.7 0 15.7-7 15.7-15.7s-7-15.7-15.7-15.7H344.5zM220.7 434.5c-5.7 0-10.4-4.7-10.4-10.4v-22.9c0-5.7 4.7-10.4 10.4-10.4s10.4 4.7 10.4 10.4v22.9c0 5.7-4.6 10.4-10.4 10.4z" fill="#3E3A39" p-id="2043"></path><path d="M268.7 654.1h565.4" fill="#FCEE21" p-id="2044"></path><path d="M834.1 664.5H268.7c-5.7 0-10.4-4.7-10.4-10.4s4.7-10.4 10.4-10.4H834c5.7 0 10.4 4.7 10.4 10.4s-4.6 10.4-10.3 10.4z" fill="#3E3A39" p-id="2045"></path><path d="M156.1 250.1h-12.3v-12.3c0-3.3-2.7-6-6-6s-6 2.7-6 6v12.3h-12.3c-3.3 0-6 2.7-6 6s2.7 6 6 6h12.3v12.3c0 3.3 2.7 6 6 6s6-2.7 6-6V262h12.3c3.3 0 6-2.7 6-6s-2.7-5.9-6-5.9zM953.5 462.8h-12.3v-12.3c0-3.3-2.7-6-6-6s-6 2.7-6 6v12.3h-12.3c-3.3 0-6 2.7-6 6s2.7 6 6 6h12.3v12.3c0 3.3 2.7 6 6 6s6-2.7 6-6v-12.3h12.3c3.3 0 6-2.7 6-6s-2.7-6-6-6z" fill="#F7E42F" p-id="2046"></path><path d="M849.6 182.6h-14.3v-14.3c0-3.8-3.1-6.9-6.9-6.9s-6.9 3.1-6.9 6.9v14.3h-14.3c-3.8 0-6.9 3.1-6.9 6.9s3.1 6.9 6.9 6.9h14.3v14.3c0 3.8 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9v-14.3h14.3c3.8 0 6.9-3.1 6.9-6.9s-3.1-6.9-6.9-6.9z" fill="#F8B62D" p-id="2047"></path><path d="M278.8 227.8m-10.4 0a10.4 10.4 0 1 0 20.8 0 10.4 10.4 0 1 0-20.8 0Z" fill="#F8B62D" p-id="2048"></path><path d="M921.4 325.7m-13.9 0a13.9 13.9 0 1 0 27.8 0 13.9 13.9 0 1 0-27.8 0Z" fill="#F8B62D" p-id="2049"></path><path d="M712.2 228.3m-13.9 0a13.9 13.9 0 1 0 27.8 0 13.9 13.9 0 1 0-27.8 0Z" fill="#F7E42F" p-id="2050"></path><path d="M92.7 465.3c-15.5 0-28.2-12.6-28.2-28.2 0-15.5 12.6-28.2 28.2-28.2s28.2 12.6 28.2 28.2-12.7 28.2-28.2 28.2z m0-42.5c-7.9 0-14.3 6.4-14.3 14.3s6.4 14.3 14.3 14.3S107 445 107 437.1s-6.4-14.3-14.3-14.3z" fill="#47B7F8" p-id="2051"></path><path d="M542.8 234.6c-15.5 0-28.2-12.6-28.2-28.2 0-15.5 12.6-28.2 28.2-28.2 15.5 0 28.2 12.6 28.2 28.2s-12.6 28.2-28.2 28.2z m0-42.5c-7.9 0-14.3 6.4-14.3 14.3s6.4 14.3 14.3 14.3 14.3-6.4 14.3-14.3c0.1-7.8-6.4-14.3-14.3-14.3z" fill="#F8B62D" p-id="2052"></path><path d="M380.6 110.4c-1.5-1.5-3.9-1.5-5.4 0-0.7 0.7-1.1 1.7-1.1 2.7 0 1 0.4 2 1.1 2.7l12.3 12.3c0.7 0.7 1.7 1.1 2.7 1.1s2-0.4 2.7-1.1c1.5-1.5 1.5-3.9 0-5.4l-12.3-12.3zM413.1 143c-0.7-0.7-1.7-1.1-2.7-1.1-1 0-2 0.4-2.7 1.1-1.5 1.5-1.5 3.9 0 5.4l12.3 12.3c0.7 0.7 1.7 1.1 2.7 1.1 1 0 2-0.4 2.7-1.1 0.7-0.7 1.1-1.7 1.1-2.7 0-1-0.4-2-1.1-2.7L413.1 143zM410.4 129.3c1 0 2-0.4 2.7-1.1l12.3-12.3c0.7-0.7 1.1-1.7 1.1-2.7 0-1-0.4-2-1.1-2.7-1.5-1.5-3.9-1.5-5.4 0l-12.3 12.3c-1.5 1.5-1.5 3.9 0 5.4 0.7 0.7 1.7 1.1 2.7 1.1zM387.5 143l-12.3 12.3c-0.7 0.7-1.1 1.7-1.1 2.7 0 1 0.4 2 1.1 2.7 0.7 0.7 1.7 1.1 2.7 1.1 1 0 2-0.4 2.7-1.1l12.3-12.3c1.5-1.5 1.5-3.9 0-5.4-1.4-1.5-4-1.5-5.4 0zM389.9 135.6c0-2.1-1.7-3.8-3.8-3.8h-17.4c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8H386c2.2 0 3.9-1.7 3.9-3.8zM432 131.7h-17.4c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8H432c2.1 0 3.8-1.7 3.8-3.8s-1.7-3.8-3.8-3.8zM400.3 100c-2.1 0-3.8 1.7-3.8 3.8v17.4c0 2.1 1.7 3.8 3.8 3.8s3.8-1.7 3.8-3.8v-17.4c0.1-2-1.7-3.8-3.8-3.8zM400.3 146c-2.1 0-3.8 1.7-3.8 3.8v17.4c0 2.1 1.7 3.8 3.8 3.8s3.8-1.7 3.8-3.8v-17.4c0.1-2.1-1.7-3.8-3.8-3.8z" fill="#FAEE00" p-id="2053"></path><path d="M876.2 924h-24.8c-5.7 0-10.4-4.7-10.4-10.4s4.7-10.4 10.4-10.4h24.8c5.7 0 10.4 4.7 10.4 10.4s-4.7 10.4-10.4 10.4zM214.4 924h-31.7c-5.7 0-10.4-4.7-10.4-10.4s4.7-10.4 10.4-10.4h31.7c5.7 0 10.4 4.7 10.4 10.4s-4.7 10.4-10.4 10.4zM820.8 924H249.3c-5.7 0-10.4-4.7-10.4-10.4s4.7-10.4 10.4-10.4h571.4c5.7 0 10.4 4.7 10.4 10.4 0.1 5.7-4.6 10.4-10.3 10.4z" fill="#3E3A39" p-id="2054"></path><path d="M289.2 394.1c-5.7 0-10.4-4.7-10.4-10.4v-9.6c0-5.7 4.7-10.4 10.4-10.4s10.4 4.7 10.4 10.4v9.6c0 5.8-4.7 10.4-10.4 10.4zM289.2 489.4c-5.7 0-10.4-4.7-10.4-10.4v-59.5c0-5.7 4.7-10.4 10.4-10.4s10.4 4.7 10.4 10.4V479c0 5.8-4.7 10.4-10.4 10.4z" fill="#FFFFFF" p-id="2055"></path><path d="M806.3 748.1H248.5c-21 0-38.1-17.1-38.1-38.1V458.7c0-5.7 4.7-10.4 10.4-10.4s10.4 4.7 10.4 10.4v251.2c0 9.6 7.8 17.3 17.3 17.3h557.9c9.6 0 17.3-7.8 17.3-17.3v-380c0-9.6-7.8-17.3-17.3-17.3H248.5c-9.6 0-17.3 7.8-17.3 17.3v36.6c0 5.7-4.7 10.4-10.4 10.4s-10.4-4.7-10.4-10.4v-36.6c0-21 17.1-38.1 38.1-38.1h557.9c21 0 38.1 17.1 38.1 38.1v380c0 21-17.1 38.2-38.2 38.2z" fill="#3E3A39" p-id="2056"></path></svg>
                去登录
                <i class="el-icon-arrow-right ml-auto" />
              </span>
            </div>
          </li>
          <li class="menuItem menuItem-active">
            <span class="truncate"> <i class="el-icon-mobile-phone"></i>小程序</span>
            <div>
              <embed class="p-0.5" :src="require('@/assets/uni.png')" width="100%" height="100%" align="center"></embed>
            </div>
          </li>
        </div>
      </div>
      <el-main class="overflow-y-auto overflow-x-hidden"
      style="height:calc(100% - 3rem)"
      >
        <onlyview />
      </el-main>
    </div>
	</div>
</template>

<script>

import { mapGetters,mapActions } from 'vuex'
import onlyview from '@/layouts/onlyview.js'
export default{
  // name:'homepage',
  data(){
    return{
    }
  },
  components:{onlyview},
  computed:{
    avatorurl(){
      const defaul = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      const ava = this.$store.getters.avator
      return ava? ava:defaul
    },
    ...mapGetters(['info','token']),
    type(){
      // /SRC/competition
      const { fullPath } = this.$route
      return /^\/SRC\//.test(fullPath)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-menu-item,.el-submenu{
  height: 3rem !important; 
}
.menuItem{
  display: block;
  padding: 0 12px;
  position: relative;
  >span{
    transition: all .5s;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: tahoma,"microsoft yahei","微软雅黑";
    font-size: 14px;
    height: 3rem;
    color: #000;
    opacity: 0.5;
  }
  >div{
    transition: all .5s;
    display: none;
    padding: 0;
    background-color: #fff;
    border-radius: 6px 6px 4px 4px;
    z-index: 233;
    width: 120px;
    left: -27px;
    font-size: 12px;
    position: absolute;
    box-shadow: 0 0 2px 0 #6973b3;
    // background-image: linear-gradient(to left, #b5ffe2, #d8e4f1);
    .item{
      display: flex;
      border-radius: 6px 6px 4px 4px;
      font-size: 14px;
      user-select: none;
      height: 38px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      box-sizing: border-box;
      color: #0004;
      white-space: nowrap;
      text-align: center;
      width: 100%;
      &:hover{
        color: #0008;
        background-color: #f7f7f7;
      }
      &-active{
        color: #000;
      }
    }
  }
  &:hover{
    >span{ opacity: 1; }
    >div{ display: block; }
  }
  //头像
  &.avataritem{
    .title{
      img{
        height: 2rem; width: 2rem;
      }
      >span{
        transition: all .5s;
        cursor: pointer;
        &:hover{
          transform: scale(1.2);
        }
      }
    }
    >span{
      position: relative;
      z-index: 234;
    }
    >div{
      transform: translate(-4.75rem,0); 
      padding-top: 2rem;
      text-align: center;
      width: 200px;
      .item img{
        height: 1.25em; width: 1.25em; margin-right: 0.3rem;
      }
    }
  }
  &.avataritem:hover{
    >span { transform: translate(-2rem,50%) scale(2)}
  }
  &-active{
    & >span{ opacity: 1; }
  }
}
#edn-1{
  font-size: 36px;
  position: absolute;
  font-style: italic;
  color:#f83842;
  // mix-blend-mode: lighten;
  // animation:ani-name1 0.25s infinite;
}
#edn-2{
  font-size: 24px;
  position: absolute;
  font-style: italic;
  color: #33f8ff;
  mix-blend-mode: lighten;
  // animation: ani-name2 0.25s infinite;
}
@keyframes ani-name1{
	from{
		margin-left:1px;
		margin-top:1px;
		}
	to{
		margin-left:-1px;
		margin-top:-1px;
		}
}
@keyframes ani-name2{
	from{
		margin-left:-1px;
		// margin-top:-1px;
		}
	to{
		margin-left:1px;
		// margin-top:1px;
		}
}
</style>